<template>
  <div class="page-root">
    <BasePanel>
      <BaseSearch :search="searchProps" @searchData="updateTable" @resetData="updateTable" />
      <div class="table-top-wrap">
        <div class="table-title">
          <span>列表</span>
        </div>
        <div class="btn-gruop">
          <a-button type="primary" icon="plus" ghost @click="handleAdd">新增</a-button>
          <a-button icon="swap" @click="sortShow = true">排序</a-button>
        </div>
      </div>
      <BaseTable :loading="loading" :columns="columns" :dataSource="dataSource" :pagination="false"
        :scroll="{ x: 1000 }">
        <template slot="tips" slot-scope="{ record }">
          <div v-if="record.tips" class="tags-wrap">
            <a-tag color="blue" :key="index" v-for="(item, index) in record.tips.split(',')">{{ item }}</a-tag>
          </div>
          <div v-else>/</div>
        </template>
        <template slot="icon" slot-scope="{ record }">
          <img v-if="record.icon" class="table-img" :src="record.icon" @click="handlePriview(record.icon)">
          <span v-else>/</span>
        </template>
        <template slot="limitingSwitch" slot-scope="{ record, index }">
          <a-switch :checked="record.isChecked" checked-children="启用" un-checked-children="禁用" :loading="record.loading"
            @change="onChange(record, index)" style="width:70px" />
        </template>
        <template slot="needManual" slot-scope="{ record, index }">
          <a-switch :checked="record.needManual" checked-children="启用" un-checked-children="禁用" :loading="record.loading"
            @change="onChange2(record, index)" style="width:70px" />
        </template>
        <template slot="status" slot-scope="{ record, index }">
          <a-switch :checked="record.isChecked1" checked-children="启用" un-checked-children="禁用"
            :loading="record.loading1" @change="onChange1(record, index)" style="width:70px" />
        </template>
        <template slot="operation" slot-scope="{ record }">
        <span class="primary" @click="handleEdit(record)">编辑</span>
        <a-divider type="vertical" />
        <span class="primary" @click="handleAdjust(record)">调账</span>
          <a-divider type="vertical" />
          <span class="primary" @click="handleCheck(record)">明细</span>

        </template>
      </BaseTable>
      <div v-show="dataSource.length > 0" class="page-footer">
        <BasePagination :page-key.sync="pageKey" :get-list="tableInit" />
      </div>
    </BasePanel>
    <FormModal :visible="formShow" :default="defaultObj" @success="successForm" @close="closeForm" />
    <SortModal :visible="sortShow" @success="tableInit" @close="sortShow = false" />
    
    <AdjustModal :visible="adjustShow" :id="id" :productName="productName" :companyName="companyName" :default="defaultObj" @success="successForm" @close="closeAdjust" />
    <TableModal :visible="tableShow" :id="id" @close="closeTable" />


    <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
      <img style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>
import { searchProps, columns } from './option.js';
import * as Ajax from '@/api/loan';
import FormModal from './form';
import SortModal from './sort';
import AdjustModal from './adjust';
import TableModal from './table';
export default {
  components: {
    FormModal,
    SortModal,
    TableModal,
    AdjustModal,
  },
  data() {
    return {
      searchProps,
      searchForm: {},
      columns,
      loading: true,
      dataSource: [],
      pageKey: {
        pageSize: 10,
        total: 1,
        current: 1,
      },
      formShow: false,
      defaultObj: {},
      sortShow: false,
      previewVisible: false,
      previewImage: '',
      adjustShow: false,
      tableShow: false,
      id: '',
      productName: '',
      companyName: ''
    };
  },
  created() {
    this.tableInit();
  },
  methods: {
    handleCheck(record) {
      this.id = record.id;
      this.tableShow = true;
    },
    closeTable() {
      this.tableShow = false;
      this.id = '';
    },
    handleAdjust(record) {
      const { id,productName ,companyName} = record;
      this.id = id;
      this.productName = productName;
      this.companyName = companyName;
      this.adjustShow = true;
    },
    closeAdjust() {
      this.adjustShow = false;
      this.id = '';
    },
    handlePriview(url) {
      this.previewVisible = true;
      this.previewImage = url;
    },
    updateTable(params = {}) {
      this.searchForm = { ...params };
      this.pageKey = this.$options.data().pageKey;
      this.tableInit();
    },
    onChange(record, index) {
      const _this = this;
      this.$confirm({
        title: '执行提示',
        content: '请确认是否执行？',
        onOk() {
          _this.dataSource[index].loading = true;
          const params = {
            id: record.id,
            limitingSwitch: !_this.dataSource[index].isChecked ? 1 : 0,
          };
          Ajax.editConfigList(params)
            .then(({ success }) => {
              if (success) {
                _this.$message.success('操作成功');
                _this.tableInit();
              }
            })
            .finally(() => {
              _this.dataSource[index].loading = false;
            });
        },
        onCancel() {
          _this.dataSource[index].loading = false;
        },
      });
    },
    onChange1(record, index) {
      const _this = this;
      this.$confirm({
        title: '执行提示',
        content: '请确认是否执行？',
        onOk() {
          _this.dataSource[index].loading1 = true;
          const params = {
            id: record.id,
            status: !_this.dataSource[index].isChecked1 ? 0 : 1,
          };
          Ajax.editConfigList(params)
            .then(({ success }) => {
              if (success) {
                _this.$message.success('操作成功');
                _this.tableInit();
              }
            })
            .finally(() => {
              _this.dataSource[index].loading1 = false;
            });
        },
        onCancel() {
          _this.dataSource[index].loading1 = false;
        },
      });
    },
    onChange2(record, index) {
      const _this = this;
      this.$confirm({
        title: '执行提示',
        content: '请确认是否执行？',
        onOk() {
          _this.dataSource[index].loading1 = true;
          const params = {
            id: record.id,
            needManual: !_this.dataSource[index].needManual ? 1 : 0,
          };
          Ajax.editConfigList(params)
            .then(({ success }) => {
              if (success) {
                _this.$message.success('操作成功');
                _this.tableInit();
              }
            })
            .finally(() => {
              _this.dataSource[index].loading1 = false;
            });
        },
        onCancel() {
          _this.dataSource[index].loading1 = false;
        },
      });
    },
    // table 初始化
    tableInit() {
      this.loading = true;
      const { current, pageSize } = this.pageKey;
      const params = { pageNum: current, pageSize, ...this.searchForm };
      Ajax.getConfigList(params)
        .then((res) => {
          const { data, totalCount } = res;
          this.dataSource = Array.isArray(data)
            ? data.map((it) => {
              return {
                ...it,
                isChecked: it.limitingSwitch === 1,
                loading: false,
                isChecked1: it.status === 0,
                loading1: false,
                needManual: it.needManual === 1
              };
            })
            : [];
          this.pageKey.total = totalCount;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleAdd() {
      this.formShow = true;
    },
    // 编辑
    handleEdit(record) {
      const { id, icon, productName, productNike, productType, productUrl, price, weight, pushType, limitingNum, limitingSwitch, timingTime, status, loanCycle, rate, tips, loanQuota ,handlerCode,companyName} = record;
      this.defaultObj = {
        id,
        icon,
        productName,
        productNike,
        productType,
        productUrl,
        price,
        weight,
        pushType,
        limitingNum,
        limitingSwitch: limitingSwitch === 1,
        timingTime: timingTime || '',
        status: status === 0,
        loanCycle,
        rate,
        tips,
        loanQuota,
        handlerCode,
        companyName
      };
      this.formShow = true;
    },
    successForm() {
      this.tableInit();
      this.closeForm();
    },
    closeForm() {
      this.formShow = false;
      this.defaultObj = {};
    },
  },
};
</script>

<style lang="scss" scoped>
.tags-wrap {
  display: flex;
  flex-wrap: wrap;
}

::v-deep .ant-tag {
  margin-bottom: 6px;
}

.table-wrap {
  margin-top: 16px;
}

.table-top-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.table-img {
  cursor: pointer;
  max-height: 20px;
  max-width: 100px;
}

.table-title {
  flex: 1;

  span {
    line-height: 32px;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;

    &::before {
      content: '';
      display: block;
      width: 3px;
      height: 18px;
      background-color: #1890ff;
      margin-right: 8px;
      position: relative;
      top: -1px;
    }
  }
}

.btn-gruop {
  display: flex;
  justify-content: flex-end;

  &>button {
    margin-left: 12px;

    &:first-child {
      margin-left: 0;
    }
  }
}
</style>
